 <template>
 
 
</template>
<script type="text/ecmascript-6">
import { ImagePreview } from "vant";
export default {
  name: "",
  data() {
    return {
      imgArr: [],
      instance_before: "",
    };
  },
    watch: {
      "$route.query": function(newVal, oldVal){
          
     
          try {
                this.instance_before.close();
          } catch (error) {
              
          }
      }  
    },
  methods: {
    getImgArr() {
      var str = document.getElementById("newscontent").innerHTML;
      //匹配图片（g表示匹配所有结果i表示区分大小写）
      var imgReg = /<img.*?(?:>|\/>)/gi;
      //匹配src属性
      var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      var arr = str.match(imgReg);
       if (!arr) {
           return
       } 
      this.imgArr = [];
      for (var i = 0; i < arr.length; i++) {
        var src = arr[i].match(srcReg);
        //获取图片地址
        if (src[1]) {
          this.imgArr.push(src[1]);
        }
      }
    },
    clickImg() {
      var imgDom = document
        .getElementById("newscontent")
        .getElementsByTagName("img");
      var i;
      var _this = this;
      for (i = 0; i < imgDom.length; i++) {
        (function(i) {
          var a = imgDom[i];
          a.addEventListener("click", function(e) {
            e.preventDefault();

            _this.showImg(i, _this.imgArr);
          });
        })(i);
      }
    },
    showImg(i, img) {
      console.log(i, img);
      this.instance_before = ImagePreview({
        images: img,
        startPosition: i,
        // closeOnPopstate: true,
        onClose() {
          // do something
        }
      });
    }
  },
  mounted() {
    this.getImgArr();
    this.clickImg();
  },
  
};
</script>

<style scoped lang="">
</style>
